import React from 'react';
import { Menu } from 'antd';

const { SubMenu } = Menu;

export default class HomeSider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            siderList: []
        };
        this.workList = [
            { key: 'daily', title: '日志' },
            { key: 'work2', title: '周报' },
            { key: 'work4', title: '年度计划' }
        ];
        this.studyList = [
            { key: 'study1', title: '日计划' },
            { key: 'study2', title: '周计划' },
            { key: 'study3', title: '月计划' },
            { key: 'study4', title: '年计划' }
        ];
        this.lifeList = [
            { key: 'life1',
                title: '健康',
                submenu: [
                    { key: 'life11', title: '饮食' },
                    { key: 'life12', title: '运动' },
                    { key: 'life13', title: '身体情况' }
                ] },
            { key: 'life2',
                title: '理财',
                submenu: [
                    { key: 'life21', title: '收入支出' },
                    { key: 'life22', title: '投资' }
                ] },
            { key: 'life3', title: '旅行计划' }
        ];
    }

    componentWillMount() {
        this.countSiderList(this.props.current);
    }

    componentWillReceiveProps(nextProps) {
        this.countSiderList(nextProps.current);
    }

    countSiderList(current) {
        let siderList = [];
        switch (current) {
            case 'work':
                siderList = this.workList;
                break;
            case 'study':
                siderList = this.studyList;
                break;
            case 'life':
                siderList = this.lifeList;
                break;
            default:
                break;
        }
        this.setState({ siderList });
    }

    toggleCollapsed() {
        this.setState(prevState => ({ collapsed: !prevState.collapsed }));
    }

    renderMenu(arr) {
    // 渲染侧边导航栏
        return arr.map((item) => {
            let { submenu, title, key } = item;
            if (submenu && submenu.length > 0) {
                return <SubMenu key={key} title={title}>{this.renderMenu(submenu)}</SubMenu>
            }
            return <Menu.Item key={key}>{title}</Menu.Item>
        })
    }

    render() {
        let { siderList } = this.state;
        return (
            <div className="pos-r" style={{ height: window.innerHeight - 64 }}>
                <Menu
                    defaultOpenKeys={['sub1']}
                    defaultSelectedKeys={['1']}
                    mode="inline"
                    onClick={(e) => {
                        this.props.menuClick(e)
                    }}
                    theme="dark"
                >
                    {this.renderMenu(siderList)}
                </Menu>
                <p className="sider-copyright">Copyright &copy; 2019 EDaily</p>
            </div>
        )
    }
}
export { HomeSider };